<!--
 * @Author: ssj
 * @Date: 2021-08-16 13:52:42
 * @LastEditors: swc shanwenchao12138@163.com
 * @LastEditTime: 2025-04-02 17:54:55
 * @Description: oImageSelectorCell
-->
<template>
  <div class="o-image-selector">
    <div class="o-image-box">
      <img
        :class="{
          'img-cursor': isView
        }"
        v-for="el in lValue"
        :key="el.id"
        :src="el.url"
        @load="el.revokeObjectURL()"
        @click="onImageView(el)"
        @mouseenter="onMouseenter"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { T_srv, ts, Tsrv, vue } from '@/services';

import { N_input } from '@/types';

interface I_value extends N_input.I_fileDesc {
  url: string;
  revokeObjectURL: () => void;
}
@T_srv.comp
export default class oImageSelectorCell extends vue {
  @T_srv.prop() renderOpts: any;

  @T_srv.prop() params: any;

  public G_compName: string = 'oImageSelectorCell';

  private G_value: N_input.I_fileValue = null;

  // 内部渲染
  private lValue: Array<I_value> = [];

  // value
  private G_imgHeight: string = '';

  public isView: boolean = false;

  // 图片高度
  // value
  private G_paramsFromComp: string = null;

  // 仅记录当前字段值
  private C_value: any = null;

  @T_srv.watch('params')
  onParamsChange() {
    this.updateContent();
  }

  created() {
    this.G_paramsFromComp = this.renderOpts.props.getTcommand()?.compName;
    if (Tsrv.noValue(this.G_paramsFromComp)) {
      this.$msg(Tsrv.getI18nByValue('未定义的组件'));
      console.error('未定义的组件');
    }
    this.G_imgHeight = this.renderOpts.props.imgHeight || '120px';
    // this.init();
    this.updateContent();
  }

  /**
   * @Author: ssj
   * @description: 初始化
   */
  private init() {
    // this.setValue(this.params.row[this.params.column.field]);
    if (this.G_paramsFromComp === 'oBaseGrid') {
      this.setValue(this.params.row[this.params.column.property]);
    } else {
      this.setValue(this.params.data[this.params.property]);
    }
  }

  public setValue(val: N_input.I_fileValue | string): void {
    const err = () => {
      this.$msg('-530,FE,90');
      console.error('json表达式不是一个数组');
    };
    if (Tsrv.utils.noValue(val)) {
      this.lValue = [];
    } else if (typeof val === 'string') {
      try {
        const v: N_input.I_fileValue = JSON.parse(val) || [];
        if (typeof v !== 'object') {
          err();
        }
        this.syncValue(v);
      } catch {
        err();
      }
    } else if (typeof val === 'object') {
      this.syncValue(val);
    } else {
      err();
    }
  }

  private syncValue(val: N_input.I_fileValue) {
    this.lValue = [];
    val.files.forEach(el => {
      this.lValue.push({
        // 识别此json内容是什么内容
        _content_: el._content_,
        // 文件名
        fileName: el.fileName,
        // 文件库里的文件名
        libFileName: el.libFileName,
        url: '',
        revokeObjectURL: null
      });
    });
    this.lValue.forEach(el => {
      if (Tsrv.utils.noValue(el.url)) {
        const dwn = new ts.T_downloadArg();
        dwn.setFileName(el.libFileName).setPath('image');
        Tsrv.download(dwn)
          .then(r => {
            if (!r.err) {
              el.url = r.url;
              el.revokeObjectURL = r.revokeObjectURL;
            } else {
              this.$msg(r.err);
            }
          })
          .catch(err => {
            this.$msg(err);
          });
      }
    });
  }

  private onImageView(e: N_input.I_fileValue): void {
    if (!this.isView) {
      return;
    }
    Tsrv.utils.createModal('o-image-viewer', {
      imageValue: e
    });
  }

  /**
   * 刷新图片内容
   */
  private updateContent() {
    let value;
    if (this.G_paramsFromComp === 'oBaseGrid') {
      value = this.params.row[this.params.column.property];
    } else {
      value = this.params.data[this.params.property];
    }
    if (this.C_value !== value) {
      this.setValue(value);
      this.C_value = value;
      // this.init();
    }
  }

  public onMouseenter() {
    if (this.G_paramsFromComp === 'oBaseGrid') {
      this.isView = this.renderOpts.props.getTcommand().editorStatus === 'none';
    } else {
      this.$msg({});
      console.error('未定义的组件');
    }
  }
}
</script>

<style scoped lang="scss">
.o-image-selector {
  height: 32px;
  padding: 3px;
  .o-image-box {
    display: flex;
    padding-right: 5px;
    overflow: hidden;
    height: 100%;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    img {
      height: 100%;
      width: auto;
      margin-right: 6px;
      border: 1px solid rgb(222, 214, 214);
    }
    .img-cursor {
      cursor: zoom-in;
    }
  }
}
</style>
